<template>
    <div class="Banxin">
        <div class="carda" @click="BDtiaozhuan(item.typeId)" v-for="(item, index) in list1" :key="index">
            <img :src="item.typeImg" class="image" />
            <div class="bottom" style="padding: 14px">
                <span>{{ item.typeTitle1 }}</span>
                <span>1020</span>
            </div>
        </div>
        <div v-if="finished" class="bottomtext" @click="downRefresh">
            <el-button type="" link>查看更多</el-button>
        </div>
        <div class="bottomtext" v-else>
            全部加载完成
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getTSBangDan } from '../api/bangdan'
import { useRouter } from 'vue-router'
const router = useRouter()
const list = ref([])
const list1= ref([])
let finished = ref(true)


//下拉刷新函数
const bddownRefresh=()=>{
    let LLength= list.value.length - list1.value.length
    
    // 根据当前展示的列表数据进行异步更新操作
    setTimeout(() => {
        if(LLength>2){
            for (let i = 0; i < 2; i++) {
                list1.value.push(list.value[list1.value.length]);
            }

        }else{
            for (let i = 0; i < LLength; i++) {
                list1.value.push(list.value[list1.value.length]);
            }
        }
        // 数据全部加载完成
        if (list1.value.length >= list.value.length ) {
            finished.value = false;
        }
    }, 1000);
}

//加载页面时获取数据，存到storeage中
onMounted(async () => {
    let res = await getTSBangDan()
    console.log(res.data.page.list);
    list.value = res.data.page.list
    bddownRefresh()
})
const BDtiaozhuan = (data) => {
    console.log(data);
    router.push({ name: 'bangdanx', query: { value: data } })
}
//查看更多刷新
const downRefresh = () => {
    bddownRefresh()

}
</script>

<style lang="scss" scoped>
.Banxin {
    box-sizing: border-box;
    width: 60%;
    height: 100%;
    margin: 0 auto;
    background-color: yellow;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .carda {
        width: 48%;
        height: 300px;
        background-color: blue;
        margin-bottom: 30px;

        .image {
            width: 100%;
            height: 250px;
            display: block;
        }

        .bottom {
            display: flex;
            justify-content: space-between;
            font-size: 15px;
            color: #333;
        }

    }


    .bottomtext {
        height: 120px;
        width: 100%;
        text-align: center;
    }
}
</style>